<template>
  <el-card>
    <el-form
      label-width="80px"
      :inline="true"
      type="flex"
      justify="space-between"
    >
      <el-form-item label="标签名称" style="margin-right: 200px">
        <el-input
          v-model="queryData.keyword"
          placeholder="请根据文章标题搜索"
          label-width="80px"
        ></el-input>
      </el-form-item>
      <el-form-item style="margin-right: 600px">
        <el-button @click="Del">清除</el-button>
        <el-button type="primary" @click="Search">搜索</el-button>
      </el-form-item>
      <el-button type="success" @click="addshowDialog = true"
        >新增技巧</el-button
      >
      <el-form-item label="状态">
        <el-select v-model="queryData.state" placeholder="请选择">
          <el-option label="已启用" :value="0"></el-option>
          <el-option label="已禁用" :value="1"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-alert
      :title="`数据一共${total}条`"
      type="info"
      :closable="false"
      show-icon
    >
    </el-alert>
    <br />
    <!-- -------------------------表格--------------------------- -->
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="index" type="index" label="序号" width="80">
      </el-table-column>
      <el-table-column prop="title" label="文章标题" width="280">
        <template slot-scope="{ row }">
          <span>{{row.title}}</span>
          <i
          class="el-icon-film"
          v-if="row.videoURL"
          style="color: blue"
          @click="videoEvent(row)"
          ></i>
        </template>
      </el-table-column>
      <el-table-column prop="visits" label="阅读数"> </el-table-column>
      <el-table-column prop="username" label="录入人"> </el-table-column>
      <el-table-column prop="createTime" label="录入时间">
        <template slot-scope="{ row }">
          {{ row.createTime | timer }}
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="{ row }">
          <span>{{ row.state === 0 ? "已禁用" : "已启用" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button type="text" size="small" @click="showArticleInfo(row)"
            >预览</el-button
          >
          <el-button type="text" size="small" v-if="row.state === 1" @click="state(row)"
            >启用</el-button
          >
          <el-button type="text" size="small" v-if="row.state === 0" @click="state(row)"
            >禁用</el-button
          >
          <el-button type="text" size="small" @click="edlArticles(row.id)"
           :disabled="row.state==0"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="delArticles(row.id)"
          :disabled="row.state==0"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- ---------------------分页 ---------------------------->
    <el-row type="flex" justify="end" align="middle" style="height: 60px">
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryData.page"
          :page-sizes="[4, 6, 10, 20]"
          :page-size="queryData.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-row>
    <!--  ---------------------添加与修改弹框---------------------->
    <el-dialog title="添加文章" @close="closeHanlder" :visible.sync="addshowDialog" width="40%">
      <el-form
        
        v-if="addshowDialog"
        :model="formData"
        :rules="formRules"
        ref="form"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input
            v-model="formData.title"
            placeholder="请根据文章标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章标题" prop="articleBody">
          <template>
            <vue-editor v-model="formData.articleBody" />
          </template>
        </el-form-item>

        <el-form-item label="视频地址" prop="videoURL">
          <el-input v-model="formData.videoURL"></el-input>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center">
        <el-button @click="addshowDialog = false">取消</el-button>
        <el-button type="primary" @click="btnOk">确定</el-button>
      </el-row>
    </el-dialog>
    <!-- ----------------------预览弹框-------------------- -->
    <el-dialog title="预览" :visible.sync="showDialog" width="60%" >
      <el-row>
        {{ articleInfo.videoURL }}
      </el-row>
      <el-row>
        <span>{{ articleInfo.createTime | timer }}</span>
        <!-- <span>{{ name }}</span> -->
        <span>{{articleInfo.username}}</span>
        <span>     <i class="el-icon-view"></i> </span>
        <span>   0</span>
        
        <div class="color">
          <hr>
          <span v-html=" articleInfo.articleBody">{{ articleInfo.articleBody}}</span>
        </div>
      </el-row>
    </el-dialog>
    <!-- -----------------------视频弹框----------------------------- -->
    <VideoDialog ref="videos" />
  </el-card>
</template>

<script>
import { mapGetterspGetters } from "vuex";
import {
  getArticleslistApi,
  edlArticlesApi,
  getArticlesInfoApi,
  delArticlesApi,
  addArticlesApi,
  getStateApi,
} from "@/api/articles";
import addArticles from "./compentens/add-articles";
import VideoDialog from './compentens/VideoDialog'
export default {
  name: "Aritcles",

  components: { addArticles , VideoDialog},
  data() {
    return {
      articleInfo: {},
      formData: {
        title: "",
        videoURL: "",
        articleBody: "",
      },
      formRules: {
        title: [{ required: true, message: "请输入", trigger: "blur" }],
        articleBody: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      showDialog: false,
      addshowDialog: false,
      total: 0, //总数
      list: [],
      queryData: {
        page: 1,
        pagesize: 10,
        keyword: "",
      },
      //------------=状态------------
      hireType: [
        {
          id: 0,
          value: "已禁用",
        },
        {
          id: 1,
          value: "已启用",
        },
      ],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    // -----------------------列表------------------
    async initData() {
      let { items, counts } = await getArticleslistApi(this.queryData);
      console.log(items);
      this.list = items;
      this.total = counts;
    },
    Search() {
      this.initData();
    },
    //  -----------------添加-------------------
    async btnOk() {
      try {
        await this.$refs.form.validate();
      } catch (error) {
        return console.log(error);
      }
      await addArticlesApi(this.formData);
      this.$message.success("操作成功");
      this.formData = {};
      this.addshowDialog = false;
      this.initData();
    },
    // 弹框关闭、表单重置逻辑
    closeHanlder() {
      this.formData = {};
      
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryData.page = val;
      this.initData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryData.pagesize = val;
      this.initData();
    },
    //--------------清空-------------------
    Del() {
      this.queryData = {};
      this.initData();
    },
    // 切换按钮
    state(val) {},
    // ---------修改---------------
    async edlArticles(id) {
      console.log(id);
      let res = await getArticlesInfoApi(id);
      console.log(res);
      this.zhaegzihan = res;
      this.formData = res;
      this.addshowDialog = true;
    },
    // -------------删除--------------
    async delArticles(id) {
      await this.$confirm("确认删除吗");
      // 2.2 发生删除请求，传递删除ID
      await delArticlesApi(id);
      // 2.3 提示成功
      this.$message.success("删除成功");
      // 2.4 更新列表
      this.initData();
    },
    //-----------------------状态
    async state(val) {
      console.log(val);
      if(val.state === 1){
        val.state = 0 
      }else{
        val.state = 1
      }
      let res =  await getStateApi(val.id, val.state )
      console.log(res);

    },
    //预览
    async showArticleInfo(row) {
      console.log(row);
      this.showDialog = true;
      
      let res = await getArticlesInfoApi(row.id);
       this.articleInfo = {...res, username: row.username}
    },
    // 点击视频 播放
    videoEvent(row){
      this.$refs.videos.isShow = true
      this.$refs.videos.playVideo(row)
      console.log(row.videoURL);
    }
  },
};
</script>

<style lang="scss" scoped>
// 弹窗信息
::v-deep .el-dialog__header {
  background: #66b1ff;

  .el-icon-close:before {
    color: #fff;
  }

  .el-dialog__title {
    color: #fff;
  }
}
::v-deep .color{
  background-color: #f5f5f5;
  // background: red;

}
</style>
